<script setup lang="ts" name="layout">
import { reactive, ref, Ref, watch, computed } from "vue";
import { LayoutType } from "@/stores/interface";
import { useGlobalStore } from "@/stores/modules/global";
import ThemeDrawer from "@/layouts/components/theme-drawer/index.vue";

const globalStore = useGlobalStore();

const isDark = computed(() => globalStore.isDark);
const layout = computed(() => globalStore.layout);
const watermark = computed(() => globalStore.watermark);

const font = reactive({ color: "rgba(0, 0, 0, .15)" });
watch(isDark, () => (font.color = isDark.value ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)"), {
  immediate: true
});
</script>

<template>
  123123
  <el-watermark id="watermark" :font="font" :content="watermark ? ['Geeker Admin', 'Happy Working'] : ''">
    <router-view v-slot="{ Component, route }">
      <!-- <transition appear name="fade-transform" mode="out-in"> -->
      <component :is="Component" :key="route.path" />
      <!-- </transition> -->
    </router-view>
    <theme-drawer></theme-drawer>
  </el-watermark>
</template>

<style lang="scss" scoped>
.layout {
  min-width: 600px;
}
</style>
